<template>
  <view class="flex-1 bg-login flex flex-col">
    <view class="flex-[2] flex-col justify-center items-center flex">
      <view class="text-center">
        <image src="@/static/login-logo.png" class="w-[168rpx] h-[174rpx]" />
        <view class="font-medium text-[48rpx] mt-[44rpx] text-theme"
          >凤之翼公务航空</view
        >
      </view>
    </view>
    <view class="px-[86rpx] flex-1 flex">
      <view class="mt-3 flex flex-col justify-center items-center w-full">
        <button
          v-if="aloneChecked"
          hover-class="bg-theme-hover"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
          class="bg-theme h-12 leading-[96rpx] text-lg text-[#fff] rounded-[60rpx] font-medium w-full"
        >
          一键授权登录
        </button>
        <button
          v-else
          hover-class="bg-theme-hover"
          @click="getPhoneNumberA"
          class="bg-theme h-12 leading-[96rpx] text-lg text-[#fff] rounded-[60rpx] font-medium w-full"
        >
          一键授权登录
        </button>
        <button
          hover-class="bg-theme-hover"
          @click="navBack"
          class="bg-[#E9E9E9] h-12 leading-[96rpx] text-lg text-[#A7A7A7] rounded-[60rpx] font-medium w-full mt-3"
        >
          返回
        </button>
        <view class="flex items-center mt-[50rpx]">
          <u-checkbox
            size="16"
            activeColor="#4365de"
            label=""
            name="agree"
            usedAlone
            v-model:checked="aloneChecked"
            @change="changeCheck"
          >
          </u-checkbox>
          <view class="text-[#979797] text-xs text-center ml-1">
            勾选即代表已阅读并同意<text class="text-[#5B7CFF]" @click="goWeb"
              >《服务协议和隐私政策》</text
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  mpWeixinGetPhone_api,
  mpWeixinRegisterAndLogin_api,
} from "@/api/user.js";
import { ref, reactive } from "vue";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const aloneChecked = ref(false);

const goWeb = () => {
  uni.navigateTo({
    url: "/pages/my/webView",
  });
};
const changeCheck = (e) => {
  aloneChecked.value = e;
};
const getPhoneNumberA = () => {
  uni.$u.toast("请先阅读并同意服务协议和隐私政策");
};
const getPhoneNumber = (e) => {
  if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
    uni.$u.toast("授权拒绝");
    return false;
  }
  mpWeixinGetPhone_api(e.detail.code).then((phone) => {
    uni.login({
      provider: "weixin",
      success: (res) => {
        mpWeixinRegisterAndLogin_api({
          code: res.code,
          phone: phone.phone,
        }).then((resulit) => {
          userStore.getUser(resulit.userinfo);
          userStore.login(resulit.userinfo.token);
          uni.$u.toast("注册成功");
          setTimeout(() => {
            uni.switchTab({
              url: "/pages/my/my",
            });
          }, 500);
        });
      },
      fail: (err) => {
        console.log(err);
      },
      complete: () => {
        uni.hideLoading();
      },
    });
  });
};

const navBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.bg-login {
  background: url("https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/fly/login-bg.png")
    no-repeat;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  button {
    padding: 0;
    &::after {
      border: none;
    }
  }
}
</style>
